{% extends "management/base.html" %}

{% block title %}修改密码{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8">
            <!-- 提示信息 -->
            {% if state == 'password_error' %}
                <div class="alert alert-danger text-center">
                    <strong>错误：</strong>原始密码不正确
                </div>
            {% elif state == 'repeat_error' %}
                <div class="alert alert-warning text-center">
                    <strong>警告：</strong>两次输入的新密码不一致
                </div>
            {% elif state == 'empty' %}
                <div class="alert alert-warning text-center">
                    <strong>警告：</strong>密码不能为空
                </div>
            {% elif state == 'success' %}
                <div class="alert alert-success text-center">
                    <strong>成功：</strong>密码修改成功！
                </div>
            {% elif messages %}
                <div class="alert alert-danger">
                    {% for message in messages %}
                        <p>{{ message }}</p>
                    {% endfor %}
                </div>
            {% endif %}

            <!-- 修改密码表单 -->
            <form method="POST" class="border p-4 rounded bg-light shadow-sm" novalidate>
                {% csrf_token %}

                <h2 class="text-center mb-4">修改密码</h2>

                <div class="mb-3">
                    <label for="id_old" class="form-label">原始密码</label>
                    <input type="password" 
                           class="form-control" 
                           name="old_password" 
                           id="id_old" 
                           required 
                           minlength="6">
                    <div class="invalid-feedback">请输入原始密码（至少6位）</div>
                </div>

                <div class="mb-3">
                    <label for="id_new" class="form-label">新密码</label>
                    <input type="password" 
                           class="form-control" 
                           name="new_password" 
                           id="id_new" 
                           required 
                           minlength="8">
                    <div class="form-text">建议至少8位，包含字母和数字</div>
                    <div class="invalid-feedback">新密码至少8位</div>
                </div>

                <div class="mb-3">
                    <label for="id_new_re" class="form-label">重复新密码</label>
                    <input type="password" 
                           class="form-control" 
                           name="repeat_password" 
                           id="id_new_re" 
                           required>
                    <div class="invalid-feedback">两次输入的密码不一致</div>
                </div>

                <button type="submit" class="btn btn-primary w-100">提交修改</button>
            </form>
        </div>
    </div>
</div>

<!-- 前端校验脚本 -->
<script>
document.querySelector('form').addEventListener('submit', function (e) {
    const newPass = document.getElementById('id_new').value;
    const repeatPass = document.getElementById('id_new_re').value;
    const repeatField = document.getElementById('id_new_re');

    if (newPass !== repeatPass) {
        e.preventDefault();
        repeatField.classList.add('is-invalid');
    } else {
        repeatField.classList.remove('is-invalid');
    }
});
</script>

{% endblock %}